import React, { Component } from 'react';
import { Menu, Icon, Switch } from 'antd'
import { Link } from 'dva/router'
import PropTypes from 'prop-types'
import lodash from 'lodash'
const SubMenu = Menu.SubMenu;

class Menus extends Component {
  state = {
     current: '1',
     openKeys: [],
   }

  render(){
    const {menu, siderFold=false, theme='dark'} = this.props
    const showKeys = this.state.openKeys || []

    //由数组生成树状对象
    const arrayToTree = (array, id = 'id', pid = 'pid', children = 'children') => {
      let data = lodash.cloneDeep(array)
      let result = []
      let hash = {}
      data.forEach((item, index) => {
        hash[data[index][id]] = data[index]
      })

      data.forEach((item) => {
        let hashVP = hash[item[pid]]
        if (hashVP) {
          !hashVP[children] && (hashVP[children] = [])
          hashVP[children].push(item)
        } else {
          result.push(item)
        }
      })
      return result
    }

    const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1),'id','mpid')

    const levelMap = {}

    //递归生成菜单
    const getMenus = (menuTrees) => {
      return menuTrees.map(item =>{
        if(item.children){
          if(item.mpid){
            levelMap[item.id] = item.mpid
          }
          return (
            <Menu.SubMenu
              key = {item.id}
              title = {
                  <span>
                    {item.icon && <Icon type={item.icon} />}
                    <span>{item.name}</span>
                  </span>
                }
            >
              {getMenus(item.children)}
            </Menu.SubMenu>
          )
        }
        return (
          <Menu.Item key = {item.id}>
            <Link to = {item.router}>
              {item.icon && <Icon type={item.icon}/>}
              <span>{item.name}</span>
            </Link>
          </Menu.Item>
        )
      })
    }

    const menuItems = getMenus(menuTree);

    //保持选中
    const getAncestorKeys = (key) => {
      let map = {}
      const getParent = (index) => {
        const result = [String(levelMap[index])]
        if (levelMap[result[0]]) {
          result.unshift(getParent(result[0])[0])
        }
        return result
      }
      for (let index in levelMap) {
        if ({}.hasOwnProperty.call(levelMap, index)) {
          map[index] = getParent(index)
        }
      }
      return map[key] || []
    }

    //只展开当前父级菜单
    const onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(key => !(showKeys.indexOf(key) > -1))
      const latestCloseKey = showKeys.find(key => !(openKeys.indexOf(key) > -1))
      let nextOpenKeys = []
      if (latestOpenKey) {
        nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)
      }
      if (latestCloseKey) {
        nextOpenKeys = getAncestorKeys(latestCloseKey)
      }
      this.setState({
        openKeys: nextOpenKeys
      })
    }

    let menuProps = !siderFold ? {
      onOpenChange,
      openKeys: this.state.openKeys,
    } : {}
    return(
      <Menu
        {...menuProps}
        theme={theme}
        mode={siderFold ? 'vertical' : 'inline'}
        inlineCollapsed={siderFold}
      >
        {menuItems}
      </Menu>
    )
  }
}

Menus.propsTypes = {
  menu: PropTypes.array,
  theme: PropTypes.string,
  siderFold: PropTypes.bool,
}
export default Menus;
